<template>
  <ModelTile
    class="urbanRenewal"
    title="城市更新"
    @onMore="onMore"
    :is-download="false"
    :is-more="false"
  >
    <div class="desc">
      <span>实际完成64亿 / 目标200亿</span>
      <span>完成率<span style="color: #6bf4c6; margin-left: 2px">84%</span></span>
    </div>
    <div class="pogress">
      <div class="pogress-box">
        <div
          class="pogress-mark"
          :class="[84 <= 20 ? 'pogress20' : 84 <= 40 ? 'pogress40' : '']"
          :style="{ width: 84 + '%' }"
        ></div>
        <div class="pogress-block" :style="{ left: 84 + '%' }"></div>
      </div>
    </div>
    <div class="d-item" v-for="item in listData" :key="item.name">
      <div class="title">
        <span class="dot"></span><span>{{ item.name }}</span>
        <span class="r">{{ item.completed }}</span>
      </div>
    </div>
  </ModelTile>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
export default defineComponent({
  name: 'csgx',
  components: {
    ModelTile
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const listData = computed(() => [
      { name: '旧厂', completed: '实际完成投资10亿' },
      { name: '建安投资', completed: '实际完成投资8亿' },
      { name: '建设', completed: '实际完成投资6亿' }
    ])
    // 跳转页面
    function onMore() {
      console.log('跳转页面')
    }
    return {
      onMore,
      listData
    }
  }
})
</script>

<style lang="scss" scoped>
.urbanRenewal {
  height: 100%;
  color: #fff;

  :deep(.content) {
    width: 100%;
    height: auto;
    margin-top: 38vh * $Bh;
    background-color: initial;
    border-radius: 0;
    padding: 0;
  }

  .desc {
    font-size: 32vh * $Bh;
    line-height: 58vh * $Bh;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5vh * $Bh;
  }

  .d-item {
    width: 100%;
    padding-top: 42vh * $Bh;

    .title {
      display: flex;
      align-items: center;

      .dot {
        width: 12vw * $Bw;
        height: 12vh * $Bh;
        border-radius: 50%;
        margin-right: 6vw * $Bw;
        background-color: #69beff;
        box-shadow: 0 0 12vh * $Bh 0 #69beff;
      }

      .r {
        margin-left: auto;
      }

      span:not(.dot) {
        padding-left: 12vw * $Bw;
      }

      font-size: 30vh * $Bh;
      line-height: 1;
    }
  }

  .pogress {
    height: 16vh * $Bh;
    background: #525f7f;

    .pogress-box {
      height: 12vh * $Bh;
      position: relative;

      .pogress-mark {
        height: 12vh * $Bh;
        background: linear-gradient(to right, #188282, #a6fdfd);

        &.pogress20 {
          background: linear-gradient(to right, #862e1c, #f7b0a2);
        }

        &.pogress40 {
          background: linear-gradient(to right, #845a1a, #f6d5a1);
        }
      }

      .pogress-block {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #fff;
        box-shadow: 0 0 6vh * $Bh 0 #fff;
        width: 6vw * $w;
        height: 16vh * $Bh;
      }
    }
  }
}
</style>
